<template>
  <span class="demonstration">{{ widget.options.singleinputText }}</span>
  <el-input
    v-model="input"
    :type="widget.options.type"
    :style="{ width: inputWidth + 'px' }"
    :maxlength="widget.options.maxlength"
    :minlength="widget.options.minlength"
    :show-word-limit="widget.options.showWordLimit"
    :placeholder="widget.options.placeholder"
    :clearable="widget.options.clearable"
    :show-password="widget.options.showPassword"
    :disabled="widget.options.disabled"
    :size="widget.options.size"
    :readonly="widget.options.readonly"
    :resize="widget.options.resize"
    :validate-event="widget.options.validateEvent"
    @focus.stop="selectField"
  >
    <slot></slot>
  </el-input>
</template>

<script setup>
import { ref, watch } from "vue";
import { assignmentWidget } from "@/views/pageDesign/components/globalVariable";

defineOptions({
  name: "singleinputWidget",
  inheritAttrs: false,
});

let $props = defineProps({
  widget: {
    type: Object,
    required: true,
  },
});
let input = ref(null);
//监听输入框改变，传值给属性里的modelValue
watch(
  () => input.value,
  (newValue, oldValue) => {
    $props.widget.options.modelValue = newValue;
  }
);
//监听属性里的modelValue改变，传值给input
watch(
  () => $props.widget.options.modelValue,
  (newValue, oldValue) => {
    input.value = newValue;
  }
);
//输入框宽度
let inputWidth = ref(240);
watch(
  () => inputWidth,
  (newValue, oldValue) => {
    $props.widget.options.singleinputWidth = newValue;
  }
);
watch(
  () => $props.widget.options.singleinputWidth,
  (newValue, oldValue) => {
    inputWidth.value = newValue;
  }
);
let selectField = () => {
  assignmentWidget($props.widget);
};
</script>

<style lang="scss" scoped>
.demonstration {
  margin-right: 10px;
}
</style>
